<template>
    <div class="thing-model-wrapper">
        <el-tabs type="border-card" v-model="activeName">
            <template v-for="item in tabList" :key="item.label">
                <el-tab-pane v-if="!item.show" :label="item.label" :name="item.label">
                    <keep-alive>
                        <component :is="item.value" v-if="item.label === activeName" :detailData="detailData" />
                    </keep-alive>
                </el-tab-pane>
            </template>
        </el-tabs>
    </div>
</template>
<script setup lang="ts">
import Attribute from './components/Attribute.vue';
import Event from './components/Event.vue';
import Action from './components/Action.vue';
import Rule from './components/Rules.vue';
import Module from './components/module/Index.vue';
import { type SysMetadataObject } from '@great/services';

const props = defineProps<{
    detailData?: SysMetadataObject;
}>();

// TODO show使用时是不是写反了？hide？
const tabList = ref([
    {
        label: '属性',
        value: markRaw(Attribute)
    },
    {
        label: '事件',
        value: markRaw(Event),
        show: props.detailData?.isComponent || props.detailData?.modifierType === 'ABSTRACT'
    },
    {
        label: '行为',
        value: markRaw(Action),
        show: props.detailData?.isComponent || props.detailData?.modifierType === 'ABSTRACT'
    },
    {
        label: '规则',
        value: markRaw(Rule),
        show: props.detailData?.modifierType === 'ABSTRACT' // 父模型不显示
    },
    {
        label: '组件',
        value: markRaw(Module),
        show: !(!props.detailData?.isComponent && props.detailData?.modifierType !== 'ABSTRACT')
    }
]);
const activeName = ref(tabList.value[0].label);
</script>
<style scoped lang="scss"></style>
